<!--
 * @Author: wcx 1055127249@qq.com
 * @Date: 2024-12-30 15:53:28
 * @LastEditors: wcx 1055127249@qq.com
 * @LastEditTime: 2025-01-17 14:27:34
 * @FilePath: \my-project\src\views\CreateListBiz\actionList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-table :data="list" border>
    <el-table-column label="按钮文字">
      <template slot-scope="scope">
        <el-input v-model="scope.row.label" placeholder="请输入按钮名称" clearable/>
      </template>
    </el-table-column>
    <el-table-column label="按钮图标">
      <template slot-scope="scope">
        <custom-icon-select v-model="scope.row.icon" placeholder="请选择按钮图标" clearable style="width:100%"/>
      </template>
    </el-table-column>
    <el-table-column label="按钮类型">
      <template slot-scope="scope">
        <el-select v-model="scope.row.type" placeholder="请选择按钮类型" clearable style="width:100%">
          <el-option v-for="i in types" :label="i" :value="i">
            <div class="flex"><span>{{ i }}</span><el-button :type="i"></el-button></div>
          </el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="朴素按钮" width="70" align="center">
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.plain"/>
      </template>
    </el-table-column>
    <el-table-column label="位置">
      <template slot-scope="scope">
        <el-select v-model="scope.row.position" placeholder="请选择按钮位置" clearable style="width:100%">
          <el-option label="表格行内" value="1"></el-option>
          <el-option label="表格左上方" value="2"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column width="340">
      <template slot-scope="scope">
        <el-button type="primary" @click="$emit('action', scope.row)" icon="el-icon-edit-outline">编写执行代码</el-button>
        <el-button type="primary" @click="handleAdd(scope.$index)" icon="el-icon-plus" plain>添加</el-button>
        <el-button type="danger" @click="handleDelete(scope.$index)" icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      types: ['default', 'primary', 'success', 'info', 'warning', 'danger', 'text'],
      list: [
        {
          label: "新增按钮",
          position: "2",
          "icon": "el-icon-plus",
          "event": "onAdd",
          "type": "primary",
          "action": "this.$refs.form.add(this.table)"
        },
        {
          "label": "批量删除按钮",
          position: "2",
          "icon": "el-icon-delete",
          "event": "onDelete",
          "type": "danger",
          "action": "this.$refs.form.delete(this.table)"
        },
        {
          "label": "修改",
          position: "1",
          "event": "onEdit",
          "type": "primary",
          "action": "this.$refs.form.edit(data, this.table)"
        }
      ]
    }
  },
  methods: {
    setData(data){
      this.list = data
    },
    handleClick() {
      this.list.push({})
    },
    handleDelete(index) {
      this.list.splice(index, 1)
    },
    createRules(property){
      const msg = {
        event: '请输入按钮事件名',
        label: '请输入按钮文字',
        type: '请选择按钮类型'
      }
      const validator = (rule, value, callback) => {
        if (!value) {
          return callback(new Error(msg[property]))
        }
        callback()
      }
      return { validator, trigger: 'change' }
    },
    handleAdd(index) {
      this.list.splice(index + 1, 0, {})
    },
    async getData() {
      return this.list
    }
  }
}
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex20 {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>